import React, { Component } from 'react'

import {
  BrowserRouter as Router,
  Link,
  Switch,
  Route
} from 'react-router-dom'

const routes = [
  {
    path: '/item1',
    label: 'item1',
    sidebar: () => {
      return (
        <div>sidebar1</div>
      )
    },
    main: () => {
      return (
        <div>main1</div>
      )
    }
  },
  {
    path: '/item2',
    label: 'item2',
    sidebar: () => {
      return (
        <div>sidebar2</div>
      )
    },
    main: () => {
      return (
        <div>main2</div>
      )
    }
  }
]

export default class App extends Component {
  render() {
    return (
      <Router>
        <div style={{display: 'flex'}}>
          <div style={{width: '150px'}}>
            <ul>
              {
                routes.map(route => {
                  return (
                    <li key={route.label}>
                      <Link to={route.path}>{route.label}</Link>
                    </li>
                  )
                })
              }
            </ul>
            <Switch>
              {
                routes.map(route => {
                  return (
                    <Route key={route.label} path={route.path}>
                      <route.sidebar></route.sidebar>
                    </Route>
                  )
                })
              }
            </Switch>
          </div>
          <div>
          <Switch>
            {
              routes.map(route => {
                return (
                  <Route key={route.label} path={route.path}>
                    <route.main></route.main>
                  </Route>
                )
              })
            }
          </Switch>
          </div>
        </div>
      </Router>
    )
  }
}
